<template>
  <header class="header">
    <div class="container">
      <div class="nav-wrapper">
        <div class="logo">
          <NuxtLink to="/" class="logo-link">
            <img src="/assets/images/logo.png" alt="" style="width: 50px; height: 50px;">
          </NuxtLink>
        </div>
        
        <!-- 移动端菜单按钮 -->
        <div class="mobile-menu-toggle" @click="toggleMobileMenu">
          <div class="hamburger" :class="{ active: isMobileMenuOpen }">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
        
        <!-- 导航菜单 -->
        <nav class="nav-menu" :class="{ 'mobile-menu-open': isMobileMenuOpen }">
          <NuxtLink to="/" class="nav-item" @click="closeMobileMenu">
            <i class="iconfont icon-shouye"></i>
            <span>号表</span>
          </NuxtLink>
          <NuxtLink to="/accounts/create" class="nav-item" @click="closeMobileMenu">
            <i class="iconfont icon-money"></i>
            <span>出售哈夫币</span>
          </NuxtLink>
          <NuxtLink to="/order" class="nav-item" @click="closeMobileMenu">
            <i class="fa fa-diamond"></i>
            <span>护航/陪玩</span>
          </NuxtLink>
          <NuxtLink to="/runKnife" class="nav-item" @click="closeMobileMenu">
            <i class="iconfont icon-daidai"></i>
            <span>带肝</span>
          </NuxtLink>
          <!-- <NuxtLink to="/redpaper" class="nav-item" @click="closeMobileMenu">
            <i class="iconfont icon-newspaper"></i>
            <span>三角洲经济日报</span>
          </NuxtLink> -->
        </nav>
        
        <div class="nav-actions">
          <template v-if="userStore.isLoggedIn">
            <a-dropdown>
              <a class="user-info">
                <!-- <a-avatar :src="userStore.userInfo.avatar" /> -->
                <img :src="userStore.userInfo?.avatar || `/images/default-avatar.png`" alt="" style="width: 32px; height: 32px; border-radius: 50%;">
                <!-- <img :src="userStore.userInfo.avatar" alt="" style="width: 32px; height: 32px; border-radius: 50%;"> -->
                
                <span class="username">{{ userStore.userInfo.username }}</span>
                <DownOutlined />
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item key="profile">
                    <NuxtLink to="/user/profile">个人中心</NuxtLink>
                  </a-menu-item>
                  <a-menu-item key="invite" v-if="userStore.userInfo?.canInvite">
                    <NuxtLink to="/invite">
                      代理中心
                    </NuxtLink>
                  </a-menu-item>
                  <a-menu-divider />
                  <a-menu-item key="logout" @click="handleLogout">
                    退出登录
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </template>
          <template v-else>
            <a-button type="primary" @click="showLogin">登录</a-button>
          </template>
        </div>
      </div>
    </div>

    <!-- 登录/注册模态框 -->
    <a-modal v-model:open="loginVisible" title="用户登录" :footer="null" width="400px">
      <LoginForm @switch-to-register="switchToRegister" @success="handleSuccess"/>
    </a-modal>

    <a-modal v-model:open="registerVisible" title="用户注册" :footer="null" width="400px">
      <RegisterForm @switch-to-login="switchToLogin" @success="handleSuccess" />
    </a-modal>
  </header>
</template>

<script setup>
import { ref } from 'vue'
import { DownOutlined } from '@ant-design/icons-vue'

const userStore = useUserStore()

// 响应式数据
const loginVisible = ref(false)
const registerVisible = ref(false)
const isMobileMenuOpen = ref(false)

// 显示登录框
const showLogin = () => {
  loginVisible.value = true
  registerVisible.value = false
}

// 切换到注册
const switchToRegister = () => {
  loginVisible.value = false
  registerVisible.value = true
}

// 切换到登录
const switchToLogin = () => {
  registerVisible.value = false
  loginVisible.value = true
}

// 退出登录
const handleLogout = () => {
  userStore.setUserInfo(null)
  // 退出登录
  localStorage.removeItem('user')
  localStorage.removeItem('token')
  navigateTo('/')
}

const handleSuccess = () => {
  loginVisible.value = false
  registerVisible.value = false
}

// 切换移动端菜单
const toggleMobileMenu = () => {
  isMobileMenuOpen.value = !isMobileMenuOpen.value
}

// 点击导航项时关闭移动端菜单
const closeMobileMenu = () => {
  isMobileMenuOpen.value = false
}

// 监听路由变化，关闭移动端菜单
const route = useRoute()
watch(route, () => {
  isMobileMenuOpen.value = false
})
</script>

<style lang="scss" scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

// 顶部导航栏样式
.header {
  background: rgb(29, 41, 57);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
  
  .nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    position: relative;
  }
  
  .logo {
    flex-shrink: 0;
    .logo-link {
      display: flex;
      align-items: center;
      font-size: 30px;
      font-weight: 700;
      color: wheat;
      text-decoration: none;
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-1px);
        color: #40a9ff;
      }
      
      .iconfont {
        font-size: 28px;
        margin-right: 12px;
        color: #1890ff;
      }
    }
  }
  
  // 移动端菜单按钮
  .mobile-menu-toggle {
    display: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
    
    .hamburger {
      width: 30px;
      height: 20px;
      position: relative;
      
      span {
        display: block;
        height: 3px;
        width: 100%;
        background: #ffffff;
        border-radius: 2px;
        position: absolute;
        transition: all 0.3s ease;
        
        &:nth-child(1) {
          top: 0;
        }
        
        &:nth-child(2) {
          top: 50%;
          transform: translateY(-50%);
        }
        
        &:nth-child(3) {
          bottom: 0;
        }
      }
      
      &.active {
        span {
          &:nth-child(1) {
            top: 50%;
            transform: translateY(-50%) rotate(45deg);
          }
          
          &:nth-child(2) {
            opacity: 0;
          }
          
          &:nth-child(3) {
            top: 50%;
            transform: translateY(-50%) rotate(-45deg);
          }
        }
      }
    }
  }
  
  .nav-menu {
    display: flex;
    align-items: center;
    gap: 24px;
    
    .nav-item {
      display: flex;
      align-items: center;
      color: #ffffff;
      text-decoration: none;
      font-weight: 500;
      font-size: 20px;
      border-radius: 8px;
      text-align: left;
      transition: all 0.3s ease;
      position: relative;
      padding: 8px 16px;
      
      i {
        margin-right: 8px;
        font-size: 16px;
        opacity: 0.8;
        transition: all 0.3s ease;
        
        @media (max-width: 768px) {
          display: none;
        }
      }
      
      &:hover {
        color: #1890ff;
        background: rgba(24, 144, 255, 0.1);
        transform: translateY(-1px);
        
        i {
          opacity: 1;
          color: #40a9ff;
        }
      }
      
      &.router-link-active {
        color: #1890ff;
        background: rgba(24, 144, 255, 0.15);
        box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
        
        i {
          opacity: 1;
          color: #40a9ff;
        }
      }
      
      &::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        // background: linear-gradient(90deg, #1890ff, #40a9ff);
        transition: width 0.3s ease;
      }
      
      &:hover::after,
      &.router-link-active::after {
        width: 80%;
      }
    }
  }
  
  .nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    
    .ant-btn {
      height: 36px;
      border-radius: 8px;
      font-weight: 500;
      border: none;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      }
    }
    
    .user-info {
      display: flex;
      align-items: center;
      gap: 10px;
      color: wheat;
      text-decoration: none;
      cursor: pointer;
      padding: 8px 12px;
      border-radius: 8px;
      transition: all 0.3s ease;
      
      &:hover {
        background: rgba(0, 0, 0, 0.05);
        transform: translateY(-1px);
      }
      
      img {
        border: 2px solid #f0f0f0;
        transition: border-color 0.3s ease;
      }
      
      &:hover img {
        border-color: #d9d9d9;
      }
      
      .username {
        font-weight: 600;
        font-size: 16px;
      }
    }
    
    .ml-2 {
      margin-left: 8px;
    }
  }
}

// 动画关键帧
@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .header {
    * {
      box-sizing: border-box;
    }
    
    .nav-wrapper {
      flex-wrap: nowrap;
      height: 64px;
      padding: 8px 0;
      position: relative;
    }
    
    // 显示移动端菜单按钮
    .mobile-menu-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 8px;
      transition: background 0.3s ease;
      
      &:hover {
        background: rgba(255, 255, 255, 0.1);
      }
      
      .hamburger {
        width: 24px;
        height: 18px;
        
        span {
          height: 2px;
          background: #ffffff;
          border-radius: 1px;
        }
      }
    }
    
    // 移动端菜单样式
    .nav-menu {
      position: fixed;
      top: 64px;
      left: 0;
      width: 100%;
      background: rgb(29, 41, 57);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      max-height: 0;
      overflow: hidden;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 999;
      padding: 0;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.0);
      opacity: 0;
      transform: translateY(-10px);
      
      &.mobile-menu-open {
        max-height: 380px;
        padding: 8px 0;
        opacity: 1;
        transform: translateY(0);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
        display: flex;
        
        .nav-item {
          animation: slideInDown 0.3s ease forwards;
          
          &:nth-child(1) { animation-delay: 0.05s; }
          &:nth-child(2) { animation-delay: 0.1s; }
          &:nth-child(3) { animation-delay: 0.15s; }
          &:nth-child(4) { animation-delay: 0.2s; }
          &:nth-child(5) { animation-delay: 0.25s; }
        }
      }
      
      .nav-item {
        display: flex;
        align-items: center;
        width: 100%;
        font-size: 16px;
        font-weight: 500;
        padding: 14px 24px;
        margin: 0;
        transition: all 0.3s ease;
        position: relative;
        background: transparent;
        
        &:last-child {
          border-bottom: none;
        }
        
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 0;
          height: 100%;
          background: linear-gradient(90deg, #1890ff, #40a9ff);
          transition: width 0.3s ease;
        }
        
        &:hover {
          background: rgba(24, 144, 255, 0.12);
          color: #40a9ff;
          padding-left: 32px;
          
          &::before {
            width: 4px;
          }
          
          i {
            color: #40a9ff;
            transform: scale(1.05);
          }
        }
        
        &.router-link-active {
          background: rgba(24, 144, 255, 0.18);
          color: #40a9ff;
          
          &::before {
            width: 4px;
          }
          
          i {
            color: #40a9ff;
          }
        }
        
        i {
          font-size: 18px;
          margin-right: 12px;
          width: 20px;
          text-align: center;
          color: rgba(255, 255, 255, 0.7);
          transition: all 0.3s ease;
        }
        
        span {
          flex: 1;
          position: relative;
          z-index: 1;
        }
      }
    }
    
    .nav-actions {
      gap: 8px;
    }
    
    .logo .logo-link {
      font-size: 20px;
      gap: 8px;
      
      img {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
      
      .iconfont {
        font-size: 20px;
        margin-right: 6px;
      }
    }
    
    .nav-actions {
      gap: 8px;
      
      .ant-btn {
        height: 38px;
        padding: 0 16px;
        font-size: 14px;
        border-radius: 19px;
        font-weight: 600;
        
        &.ant-btn-primary {
          background: linear-gradient(135deg, #1890ff, #40a9ff);
          border: none;
          box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
          
          &:hover {
            background: linear-gradient(135deg, #40a9ff, #1890ff);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(24, 144, 255, 0.4);
          }
        }
      }
      
      .user-info {
        padding: 4px 8px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.05);
        
        .username {
          font-size: 14px;
          max-width: 80px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        
        img {
          width: 32px;
          height: 32px;
          border: 2px solid rgba(255, 255, 255, 0.2);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }
        
        &:hover {
          background: rgba(255, 255, 255, 0.1);
          
          img {
            border-color: rgba(255, 255, 255, 0.4);
          }
        }
      }
    }
  }
  
  .container {
    padding: 0 16px;
  }
}

// 超小屏幕优化
@media (max-width: 480px) {
  .header {
    .nav-wrapper {
      height: 58px;
      padding: 6px 0;
    }
    
    .mobile-menu-toggle {
      width: 40px;
      height: 40px;
      
      .hamburger {
        width: 20px;
        height: 16px;
      }
    }
    
    .nav-menu {
      top: 58px;
      
      &.mobile-menu-open {
        max-height: 350px;
        padding: 12px 0;
      }
      
      .nav-item {
        font-size: 15px;
        padding: 12px 20px;
        
        &:hover {
          padding-left: 28px;
        }
        
        i {
          font-size: 16px;
          margin-right: 10px;
          width: 18px;
        }
      }
    }
    
    .logo .logo-link {
      font-size: 18px;
      
      img {
        width: 32px;
        height: 32px;
      }
    }
    
    .nav-actions {
      gap: 6px;
      
      .ant-btn {
        height: 36px;
        padding: 0 12px;
        font-size: 13px;
      }
      
      .user-info {
        padding: 3px 6px;
        
        .username {
          font-size: 13px;
          max-width: 60px;
        }
        
        img {
          width: 28px;
          height: 28px;
        }
      }
    }
  }
  
  .container {
    padding: 0 12px;
  }
}
</style>